<template>
  <div class="album-detail-container scroll-container">
    <div class="header">
      <el-image
        :src="albumInfo.cover"
        lazy
        class="left" />
      <div class="right">
        <h4>{{ albumInfo.name }}</h4>
        <p class="artist">{{ albumInfo.artist }}</p>
        <p>{{ albumInfo.publishTime }}</p>
        <div class="header-operation">
          <PlayButton :songs="albumSongs" />
          <DecoratedButton
            name="收藏"
            :icon="'&#xe761;'" />
        </div>
      </div>
    </div>
    <div class="content">
      <Tab
        active="songs"
        @getActive="getActive">
        <template #content>
          <el-tab-pane
            label="歌曲"
            name="songs">
            <SongList :songs="albumSongs" />
            <Albums
              :albums="otherAlbum"
              :artistId="artistId + ''"
              title="该歌手的其它专辑" />
          </el-tab-pane>
          <el-tab-pane
            label="详情"
            name="album">
            <div class="info">
              <p>
                专辑：<span>{{ albumInfo.name }}</span>
              </p>
              <p>
                歌手：<span>{{ albumInfo.artist }}</span>
              </p>
              <p>
                唱片公司：<span>{{ albumInfo.company }}</span>
              </p>
              <p>
                发布时间：<span>{{ albumInfo.publishTime }}</span>
              </p>
              <p>
                专辑简介：<span class="desc">{{ albumInfo.description }}</span>
              </p>
            </div>
          </el-tab-pane>
        </template>
      </Tab>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, inject, Ref } from 'vue';
import { useRoute } from 'vue-router';
import { Album, Song } from '../model';
import { getAlbumDetail, getArtistAlbum } from '../api/api';
import {
  elMessage,
  formatTime,
  getMusicInfos,
  getMusicUrls,
  getTheme,
} from '../utils/util';
import { elMessageType } from '../model/enum';
import Albums from '../components/Albums.vue';
import Tab from '../components/Tab.vue';
import SongList from '../components/SongList.vue';
import PlayButton from '../components/PlayButton.vue';
import DecoratedButton from '../components/DecoratedButton.vue';
import useConfigStore from '../store/config';
import { storeToRefs } from 'pinia';
//主题设置相关
const color = getTheme().get('fontColor');
const colorBlack = getTheme().get('fontBlack');
const boxShadow = getTheme().get('shadow');
const route = useRoute();

const config = useConfigStore();
const { showScroll, left } = storeToRefs(config);

//获取Id
const id = route.query.id;
//获取歌手其它id
const artistId = route.query.artistId;
//专辑信息
const albumInfo = reactive<Album>({
  name: '',
  cover: '',
  id: id + '',
  artist: '',
  publishTime: '',
});
//歌手其它专辑
const otherAlbum = reactive<Album[]>([]);
//专辑对应的歌曲
const albumSongs = reactive<Song[]>([]);
//页面第一次加载的动画
const first = inject<Ref<boolean>>('firstLoading');
first!.value = true;
//获取当前活跃的tab
const getActive = () => {
  showScroll.value = 'none';
  left.value = '0';
};

//获取数据
getAlbumDetail(id + '')
  .then((response: any) => {
    const {
      album: { picUrl, artist, publishTime, name, company, description },
      songs,
    } = response;
    albumInfo.name = name;
    albumInfo.cover = picUrl;
    albumInfo.publishTime = formatTime(publishTime);
    albumInfo.artist = artist.name;
    albumInfo.company = company;
    albumInfo.description = description;
    const ids: string[] = [];
    songs.forEach((item: any) => {
      getMusicInfos(ids, albumSongs, item);
    });
    getMusicUrls(ids.join(','), albumSongs);
    first!.value = false;
  })
  .catch((err: any) => {
    elMessage(elMessageType.ERROR, err.message);
  });

getArtistAlbum(artistId + '')
  .then((response: any) => {
    const { hotAlbums } = response;
    for (const item of hotAlbums) {
      const { id: albumId } = item;
      if (albumId != id + '' && otherAlbum.length <= 5) {
        const { picUrl, name, publishTime } = item;
        otherAlbum.push({
          name,
          id: albumId,
          cover: picUrl,
          publishTime: formatTime(publishTime),
        });
      } else if (otherAlbum.length > 5) {
        break;
      }
    }
  })
  .catch((err: any) => {
    elMessage(elMessageType.ERROR, err.message);
  });
</script>

<style lang="less" scoped>
@font-color: v-bind(color);
@font-color-light-black: v-bind(colorBlack);
@shadow: v-bind(boxShadow);
@font-color-gray: #7b7b7b;
@font-color-green: #1ed2a9;

.album-detail-container {
  .header {
    display: flex;
    width: 80vw;
    .left {
      height: 170px;
      width: 170px;
      box-shadow: @shadow;
      border-radius: 10px;
      margin-right: 20px;
    }
    .right {
      color: @font-color;
      h4 {
        font-size: 35px;
        margin-top: 2px;
      }
      .el-button {
        width: 110px;
        font-size: 13px;
      }
      .artist {
        margin: 14px 0;
      }
      p {
        font-size: 12px;
      }
      .header-operation {
        margin-top: 12px;
      }
    }
  }
  .content {
    margin-top: 20px;
    .album-container {
      width: 80vw;
    }

    .info {
      width: 80vw;
      p {
        font-size: 12px;
        color: @font-color;
        margin-top: 10px;
        letter-spacing: 1px;
        span {
          color: @font-color-gray;

          line-height: 1.5;
        }
      }
    }
  }
}
</style>
